<template>
  <div class="container">
    <div class="content">
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work1.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.
            Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.
          </p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work2.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work3.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work4.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work1.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
      <div class="content-item">
        <div class="item-profile">
          <div class="overflow">
            <img src="@/assets/imgs/photoList/work2.jpg" alt="">
          </div>
          <router-link to="/PictureContent" tag="h3">Our Work</router-link>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, justo sit amet risus etiam porta sem.</p>
          <router-link to="/PictureContent" tag="div" class="button">Read More</router-link>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'PicturelistPage'
}
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  // height: 1240px;
  .content {
    border-radius: 5px;
    color: #555;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    .content-item {
      width: 320px;
      height: 400px;
      margin-bottom: 30px;
      // background-color: #eee;
      .item-profile {
        width: 100%;
        height: 100%;
        padding: 10px 10px;
        box-sizing: border-box;
        overflow: hidden;
        cursor: pointer;
        transition: all .4s linear;
        &:hover {
          box-shadow: 1.5px 1.5px 10px #555;
        }
        &:hover img {
          transform: scale(1.2) rotate(2deg);
        }
        .overflow {
          width: 100%;
          height: 200px;
          overflow: hidden;
          img {
            width: 100%;
            height: 100%;
            transition: all .8s linear;
          }
        }
        h3 {
          font-size: 21px;
          font-weight: 400;
          margin: 24px auto 20px auto;
          &:hover {
            color: #72c02c;
            text-decoration: underline;
          }
        }
        p {
          margin: 15px auto;
          font-size: 13px;
          line-height: 18px;
          letter-spacing: 1.5px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 3; //需要控制的文本行数
          overflow: hidden;
        }
        .button {
          width: 110px;
          height: 32px;
          line-height: 32px;
          text-align: center;
          font-size: 14px;
          letter-spacing: 1.5px;
          color: #fff;
          background-color: #72c02c;
        }
      }
    }
  }
}
</style>
